@import "../../../styles/variables.scss";
@import "../../../styles/mixins.scss";

.page {
  min-height: 100vh;
  background-color: $bg-color;
  padding-bottom: 30rpx;
}

// 轮播图区域
.banner-section {
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  
  .banner-swiper {
    width: 100%;
    height: 300rpx;
    border-radius: $radius-large;
    overflow: hidden;
  }
  
  .banner-image {
    width: 100%;
    height: 100%;
    border-radius: $radius-large;
  }
}

// 用户列表区域
.user-list-section {
  padding: 0 20rpx;
  
  .section-title {
    font-size: $font-title;
    font-weight: $font-weight-bold;
    color: $text-primary;
    margin: 30rpx 0 20rpx;
    padding-left: 10rpx;
    border-left: 6rpx solid $primary-color;
  }
  
  .user-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }
  
  .user-card {
    background-color: $white;
    border-radius: $radius-large;
    padding: 24rpx;
    box-shadow: $shadow-light;
    transition: $transition-normal;
    
    &:active {
      transform: scale(0.98);
    }
  }
  
  // 用户基本信息
  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .user-avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-right: 20rpx;
      border: 2rpx solid rgba(255, 71, 145, 0.2);
    }
    
    .user-basic-info {
      flex: 1;
    }
    
    .user-name-wrapper {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;
    }
    
    .user-name {
      font-size: $font-subtitle;
      font-weight: $font-weight-bold;
      color: $text-primary;
      margin-right: 10rpx;
    }
    
    .user-gender {
      display: inline-flex;
      align-items: center;
      padding: 4rpx 12rpx;
      border-radius: 20rpx;
      font-size: $font-small;
      
      &.male {
        background-color: rgba(64, 158, 255, 0.1);
        color: #409EFF;
      }
      
      &.female {
        background-color: rgba(255, 71, 145, 0.1);
        color: $primary-color;
      }
      
      .user-age {
        margin-left: 6rpx;
      }
    }
    
    .user-meta {
      font-size: $font-small;
      color: $text-secondary;
      
      .dot-divider {
        margin: 0 6rpx;
      }
    }
  }
  
  // 用户介绍
  .user-intro, .user-preference {
    margin-bottom: 16rpx;
    font-size: $font-normal;
    line-height: 1.5;
    
    .intro-label, .preference-label {
      color: $text-secondary;
      margin-right: 6rpx;
    }
    
    .intro-content, .preference-content {
      color: $text-primary;
    }
  }
  
  // 用户照片
  .user-photos {
    display: flex;
    gap: 10rpx;
    margin-top: 20rpx;
    
    .user-photo {
      width: 180rpx;
      height: 180rpx;
      border-radius: $radius-medium;
      object-fit: cover;
    }
    
    .photo-more {
      width: 180rpx;
      height: 180rpx;
      border-radius: $radius-medium;
      background-color: rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: $font-subtitle;
      color: $text-secondary;
    }
  }
}

// 加载更多
.load-more, .no-more {
  text-align: center;
  padding: 30rpx 0;
  font-size: $font-small;
  color: $text-secondary;
}
